<template>
    <div class="my-tag">
        <input
            class="input"
            type="text"
            placeholder="输入标签"
            v-if="isEdit"
            ref="ipt"
            v-focus
            v-model="iptContent"
            @blur="close"
            @keyup.enter="handleEnter"
        />
        <div v-else class="text" @dblclick="doEdit">{{ value }}</div>
    </div>
</template>

<script>
export default {
    props:{
        value:String
    },  
    data(){
        return {
            // 状态切换 isShow  => true 
            isEdit: false,
            iptContent:''
        }
    },
    // 1. autofocus  ==> 有点小问题
    // 2. $nextTick 配合 ref+$refs
    // 3. 自定义指令
    methods:{
        doEdit(){
        // 切换状态
            this.isEdit = true 
            this.iptContent = this.value
            // 因为Vue中 dom是异步更新的
            
            // this.$refs.ipt.focus()
            // setTimeout(() => {
            //     console.log(this.$refs.ipt)
            // }, 0)
            // this.$nextTick(() =>{
            //     this.$refs.ipt.focus()
            // })
        },
        // 失去焦点的时候
        close(){
            this.isEdit = false
        },
        handleEnter(){
            // 如果输入内容为空 , 不执行后续操作
            if (!this.iptContent.trim()) return
            // 这个名字必须叫input
            this.$emit('input', this.iptContent)
            this.isEdit = false
        }
    },
    directives:{
        focus:{
            // 当v-focus那个标签插入到dom元素上的时候，已经能获取这个标签元素了
            // 执行，只会执行一次 
            inserted(el){
                el.focus()
            }
        }
    }
// 注意：数据有两份 
// 1. 父组件 v-model="msg"  ==> 子组件 props:value 接收，给标签显示
// 2. 子组件自己input框编辑的数据，自己定义,编辑完，通过this.$emit('input', xx)回车
}
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>